---
title: Remove on list
description: A guide on how to use Fluid DnD to remove elements from a list.
---

import ListWithRemove from "@/components/svelte/ListWithRemove.svelte";
import { Code } from "@astrojs/starlight/components";

### List of number example

To showing how to use **Fluid DnD** for removing elements from a list.
First, we're going to create a list and extract the `removeAt` function from `useDragAndDrop`:

export const listOfNumbers = `<script setup lang="ts">
import { useDragAndDrop } from "fluid-dnd/svelte";

const list = $state([1, 2, 3, 4, 5]);
const [ parent,_, removeAt ] = useDragAndDrop(list);

</script>`;

export const highlightsListOfNumbers = ["removeAt"];


<Code code={listOfNumbers} lang="svelte" mark={highlightsListOfNumbers} />

### Creating the view

After, we’ll create the list with an remove button for each element that call `removeAt`:

export const highlightsDroppable = ['<button','button>',"removeAt"];

export const listOfNumbersDroppable = `
<ul use:parent class="number-list">
  {#each list as element, index (element)}
    <li class="number" data-index={index}>
      { element }
      <button class="remove-button" onclick={removeAt(index)}>x</button>
    </li>
  {/each}
</ul>
`;

<Code code={listOfNumbersDroppable} lang="svelte" mark={highlightsDroppable} />

### Preview

<div class="p-8 bg-[var(--sl-color-gray-6)]">
  <ListWithRemove client:load />
</div>

## Add removing Class

You can add the css class setted when an element is removed using the parameter `removingClass`:

export const listOfNumbersWithRemovingClass = `<script setup lang="ts">
// ...
const [ parent, removeAt ] = useDragAndDrop(list,{
  removingClass: "removed"
});

</script>`;
export const highlightsRemovingClass = ["removingClass",'removed'];

<Code code={listOfNumbersWithRemovingClass} lang="vue" mark={highlightsRemovingClass}/>

### Changing styles

After, we’ll add the `removed` styles and transition when the class is setted:

export const highlightsStylesRemovingClass = ["removed","transition"];

export const stylesRemovingClass = `
<style scoped>
.number{
  /*
      ...
  */
  opacity: 1;
  transition: opacity 200ms ease;
}
.number.removed{
  opacity: 0;
}
</style>
`;

<Code code={stylesRemovingClass} lang="vue" mark={highlightsStylesRemovingClass} />

### Preview

<div class="p-8 bg-[var(--sl-color-gray-6)]">
  <ListWithRemove removingClass="removed" client:load  />
</div>


## Add delay before remove

You can add the amount of delay time in miliseconds before removing the element (the default is 200 miliseconds):

export const listOfNumbersDelay = `<script setup lang="ts">
// ...
const [ parent, removeAt ] = useDragAndDrop(list,{
  removingClass: "removed",
  delayBeforeRemove: 800
});});

</script>`;
export const highlightsDelay = ["delayBeforeRemove"];

<Code code={listOfNumbersDelay} lang="vue" mark={highlightsDelay}/>

### Preview

<div class="p-8 bg-[var(--sl-color-gray-6)]">
  <ListWithRemove removingClass="removed" delayBeforeRemove={800} client:load  />
</div>